document.addEventListener('DOMContentLoaded', function() {
    // 第5个容器的点击事件
    const container5 = document.querySelectorAll('.image-wrapper')[4];
    const img5 = container5.querySelector('img');
    
    // 添加一次性点击事件
    container5.addEventListener('click', function handleClick() {
        img5.src = './img/5.png';
        // 移除点击事件，确保只执行一次
        container5.removeEventListener('click', handleClick);
    }, { once: true });

    // 第7个容器的点击事件
    const container7 = document.querySelectorAll('.image-wrapper')[6];
    const originalContent = container7.innerHTML;

    // 添加一次性点击事件
    container7.addEventListener('click', function handleCarouselClick() {
        // 轮播容器的内容保持不变
        container7.innerHTML = `
            <div class="carousel-container carousel-vertical carousel-margin">
                <div class="carousel-wrapper">
                    <img src="./carousel-images/slide1.png" alt="轮播图1" class="carousel-item">
                    <img src="./carousel-images/slide2.png" alt="轮播图2" class="carousel-item">
                    <img src="./carousel-images/slide3.png" alt="轮播图3" class="carousel-item">
                    <img src="./carousel-images/slide4.png" alt="轮播图4" class="carousel-item">
                    <img src="./carousel-images/slide5.png" alt="轮播图5" class="carousel-item">
                    <img src="./carousel-images/slide6.png" alt="轮播图6" class="carousel-item">
                    <img src="./carousel-images/slide7.png" alt="轮播图7" class="carousel-item">
                    <img src="./carousel-images/slide8.png" alt="轮播图8" class="carousel-item">
                    <img src="./carousel-images/slide9.png" alt="轮播图9" class="carousel-item">
                    <img src="./carousel-images/slide10.png" alt="轮播图10" class="carousel-item">
                </div>
                <div class="carousel-controls">
                    <button class="prev-btn">&lt;</button>
                    <button class="next-btn">&gt;</button>
                </div>
                <div class="carousel-indicators">
                    <span class="indicator active"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                </div>
            </div>
        `;
        initCarousel(container7.querySelector('.carousel-container'));
        // 移除点击事件，确保只执行一次
        container7.removeEventListener('click', handleCarouselClick);
    }, { once: true });
});

// 初始化轮播功能
function initCarousel(carouselContainer) {
    const wrapper = carouselContainer.querySelector('.carousel-wrapper');
    const items = carouselContainer.querySelectorAll('.carousel-item');
    const indicators = carouselContainer.querySelectorAll('.indicator');
    const prevBtn = carouselContainer.querySelector('.prev-btn');
    const nextBtn = carouselContainer.querySelector('.next-btn');
    let currentIndex = 0;

    function updateCarousel() {
        wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        indicators.forEach((indicator, index) => {
            indicator.classList.toggle('active', index === currentIndex);
        });
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % items.length;
        updateCarousel();
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + items.length) % items.length;
        updateCarousel();
    }

    prevBtn.addEventListener('click', prevSlide);
    nextBtn.addEventListener('click', nextSlide);

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            currentIndex = index;
            updateCarousel();
        });
    });

    setInterval(nextSlide, 5000);
} 